<template>
    <div v-loading="loading1" style="background:white;height:100vh;overflow: auto;font-size:12px;" >
        <el-row >
            <el-col :span="24" style="border:0px;">
                <div class="grid-content"  >
                    <div style="text-align:center;margin:auto;font-size:30px;">液位测量</div>
                </div>
            </el-col>
        </el-row>
        <el-row >
          <el-col :span="24" style="height:90vh;display:flex;flex-direction:column;">
              <div  :style="{flex:1,backgroundSize:'70%',backgroundRepeat:'no-repeat',backgroundPosition: 'center center',backgroundImage:url}"></div>
            <!-- <img :src="img" style="backgroundRepeat:'no-repeat',backgroundPosition: 'center center',backgroundSize: 'cover'/> -->
            
          </el-col>
        </el-row>
        <el-row>
           
            <el-col :span="24" >
              <div style="display:grid; grid-template-columns: repeat(5, 1fr);">
                <!-- <div style="display:flex;flex-direction: row;justify-content: space-around;"> -->
                        <div  v-for="(item,index) in data.one" :key="index" style="padding:5px;display:flex;text-align:center;align-items:center;margin-top:1px;margin-left:10px">
                                <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                                <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                        </div>
                <!-- </div> -->
              </div>
            </el-col>
        </el-row>
        
    </div>
</template>
<script>
import {listDevs} from  "@/api/system/device";
import { mapState } from "vuex";
// import rightAxis from '@/assets/images/5000_measure.png'
export default {
 name: "emergencyBoard",
 async created() {
  let res= await this.getConfigKey("sys.server.version")
   this.version =res.msg||this.version;
   try{
    this.url='url(' +require('@/assets/images/'+this.version+'_measure.jpg')+')'
   }catch(e){
    this.url='url(' +require('@/assets/images/5000_measure2.jpg')+')'
   }
   this.init()
    if(!this.timer){
    this.timer = setInterval(() => {
        this.init()
    }, 2000);//3秒刷新次
 }
 },
 beforeDestroy() {

if(this.timer){
    clearInterval(this.timer);
    this.timer=null;
  }
},
 computed: {
  ...mapState("app", {   // 对象形式
      alarmList: "alarmList",
      lightSwitch:"lightSwitch",
      extExpSwitch:"extExpSwitch"
  })
},
 methods:{

    getFlash(row){
        //2、报警消息时，闪烁
        let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
        );
        if(f){
          if(row.displayAlarm=="2"){//告警
            return true;
          }
        }
        if(this.lightSwitch=='1'  ||this.extExpSwitch=="1")
        {//1、试灯打开
          // console.log("extExpSwitch=="+this.extExpSwitch)
          if(row.displayAlarm=="2"){//告警
            return true;
          }
        }
          return false;
      },
      getColorName(row){
        //告警消息
        if("2"== row.displayAlarm){
            let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
            );
            if(f){
                return 'red';
            }
            //3、显示设备状态颜色
            if(row.warnStatus=='1'||row.warnStatus=='0'){
                return 'black';
            }
            return 'red'
        }
        return "black";
        
      },
      getColor(row){
        if("2"== row.displayAlarm){  //告警类型
          //告警消息
          let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
          );
          if(f){//2、有报警通知，则显示灯的颜色
            return row.lightColor;
          }
        }
        if(this.lightSwitch=='1' ||this.extExpSwitch=="1"){//1、试灯打开，显示灯的颜色
            console.log("extExpSwitch=="+this.extExpSwitch)
            return row.lightColor;
        }
        //3、显示设备状态颜色
        if(row.warnStatus=='1'||row.warnStatus=='0'){
          return 'grey';
        }
          return row.lightColor;
      },
    init(){

        listDevs({"deptIds":this.deptId}).then(response=>{
          this.loading1=false
            console.log(response)
            let dataArr = response.data;
            const contactNo =["16K-113","16K-114","16K-115"]
            if(dataArr){
                console.log(dataArr)
             
                this.data.one= dataArr.filter(item=>{
                    return item.systemId.startsWith("16K")
                    
                    && ((item.systemId.split("-")[1]>42 && item.systemId.split("-")[1]<107)
                    || ((item.deviceName.includes("液位高报警")|| item.deviceName.includes("液位低报警")) 
                    && !contactNo.includes(item.systemId)) )
                    // && item.systemId.split("-")[1]>='042' && item.systemId.split("-")[1]<='107'  //开关量
                    }).sort((a,b)=> {
                    return a.systemId.split("-")[1]-b.systemId.split("-")[1]})   
              
            }
            
        })
    },
 
   
 },
 data(){
   return{
    url:"",
    version:"5000",
    loading1:true,

       loading :false,
       total: 0,
       data:{
        one:[],
        two:[]
       },

        timer:null,
        deptId:this.$route.query.depCode,
 }
}
}
</script>
<style scoped>
*{
  margin:0;
  padding:0;
}

.tip {
 margin: 2px;
   padding: 1px;
   color: rgb(52 88 124 / 75%);

   border-radius: 20% 0% 40% 0%;
   background-color: rgb(122 132 216 / 19%);
   position: absolute;float:left;margin: 2px;
}

.el-row {
   margin-bottom: 20px;

 }
 .el-col {
   border-radius: 4px;
 }
 .bg-purple-dark {
   background: #99a9bf;
 }
 .bg-purple {
   background: #d3dce6;
 }
 .bg-purple-light {
   background: #e5e9f2;
 }


.parent {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
}
.child{
 flex-basis: 20%;
}
.alarmDiv{
      display:block;
      -webkit-animation-name: imageAnim;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;
      -webkit-animation-timing-function: ease;
      -webkit-animation-play-state: running;
  }
  @-webkit-keyframes imageAnim{
      0% {opacity: 1;}
      50% {opacity: 0.5;}
      100% {opacity: 0;}
  }
  .grid-content {
    text-wrap:wrap;
    font-size:clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
    }
.imgCls{
  background-repeat:no-repeat;
  background-position: center center;
  background-size:cover,
}

</style>
